<!-- 
  @name: 车辆信息
  @date: 2020.3.10
 -->
<template>
	<view class="content">
		<!-- 列表 -->
		<view class="list-card" v-if="lists.length > 0">
			<view class="card" v-for="(item, index) in lists" :key="item.carId">
				<view class="left">{{item.carNumber}}</view>
				<view class="right">
					<text>车辆归属</text>
					<text class="t2">{{item.carOwner}}</text>
				</view>
			</view>
		</view>
		
		<!-- 列表为空时 -->
		<view class="no_lists" v-if="lists.length === 0">
			<view class="img"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',  //客户id
				lists: [],  //列表
			}
		},
		onLoad(e) {
			this.userId = e.userId;
			this.getList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.getList();
				this.$store.commit('hasLogin');
			}
		},
		methods: {
			//获取列表
			getList() {
				this.$http({
					url: this.$api.clientUrl + 'getusercarlist',
					data: {
						userId: this.userId
					}
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						this.lists = [];
						this.lists = this.lists.concat(arr);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	/* 列表 */
	.list-card {
		width: 750rpx;
		padding: 10rpx 50rpx;
		padding-bottom: 50rpx;
		.card {
			width: 650rpx;
			height: 98rpx;
			margin-top: 30rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15nXZKAdi6-AAAOse6W_RI637.png');
			display: flex;
			flex-direction: row;
			.left {
				width: 220rpx;
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				color: $color-white;
				font-size: 36rpx;
				font-weight: bold;
			}
			.right {
				flex: 1;
				margin-top: 38rpx;
				margin-left: 56rpx;
				.t2 {
					margin-left: 100rpx;
				}
			}
		}
	}
	
	/* 列表为空时 */
	.no_lists .img {
		width: 448rpx;
		height: 366rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15nX7uAFlzOAAEUQc5tgLI284.png');
	}
	
</style>
